<template>
    <div class="container" v-if="step!==10">
        <h1 v-if="step === 1" >请注意</h1>
        <h1 v-if="step === 2" >测验即将开始</h1>
        <div v-if="step === 3" class="step-3">
            <h3>在此之前请完善一点参数</h3>
            起个名：<el-input class="name-input" v-model="textParmInput.testName" placeholder="请输入测验名称"></el-input>
            时长：<el-input class="time-input" v-model="textParmInput.time" placeholder="时长"></el-input>分钟
            <div style="margin-left: 30%;margin-top: 20px;"><el-button type="primary" @click="processSteps()">开始组卷</el-button></div>
        </div>
        <h1 v-if="step === 4" class="colorful-text">正在生成试卷中</h1>
        <h1 v-if="step === 5" style="color: rgb(148.6, 212.3, 117.1);">生成完毕</h1>
        <h1 v-if="step === 6" style="color: rgb(82.4, 155.2, 46.4);">3</h1>
        <h1 v-if="step === 7" style="color: rgb(237.5, 189.9, 118.5);">2</h1>
        <h1 v-if="step === 8" style="color: rgb(245, 102, 102);">1</h1>
        <h1 v-if="step === 9" style="color:rgb(228, 5, 5);">测验开始！</h1>
        <h1 v-if="step === 20" style="color:red;">发生错误，请稍后重试</h1>
    
    </div>
</template>

<script setup lang="ts">
    import {onMounted } from 'vue';
    import useStartText from '@/hooks/useStartText'

    const {textParmInput,step,processSteps} = useStartText()
    onMounted(() => {
        processSteps();
    });
</script>



<style scoped>
.container {
    margin-top: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
 
.colorful-text {
    display: inline-block; 
    animation: colorChange 5s infinite;
}
@keyframes colorChange {
    0% { color: red; }
    20% { color: orange; }
    40% { color: yellow; }
    60% { color: green; }
    80% { color: blue; }
    100% { color: purple; }
}


.name-input {
  width: 300px;
  margin-right: 20px;
}

.time-input{
    width: 100px;
    margin-right: 20px;
}
</style>